<template>
  <div>
    <div style="margin-bottom: 10px">
      <a-input
        v-model="queryParams.tags"
        allow-clear
        placeholder="题目标签"
        style="width: 200px; margin-right: 10px"
      />
      <a-input
        v-model="queryParams.id"
        allow-clear
        placeholder="题目ID"
        style="width: 200px; margin-right: 10px"
      />
      <a-input-search
        v-model="queryParams.title"
        allow-clear
        :style="{ width: '320px' }"
        placeholder="题目标题"
        @click="loadData"
        search-button
      >
        <template #button-icon>
          <icon-search />
        </template>
        <template #button-default> Search</template>
      </a-input-search>
    </div>
    <a-scrollbar style="height: 800px; overflow: auto">
      <a-table
        :columns="columns"
        :data="formData"
        :sticky-header="10"
        :pagination="false"
      >
        <template #id="{ record }">
          <!--        <a-input v-model="formData[rowIndex].updateTime" />-->
          <a-tag color="#00b42a" style="font-size: 8px">{{ record.id }}</a-tag>
        </template>
        <template #createTime="{ rowIndex }">
          {{ formData[rowIndex].createTime.slice(0, 10) }}
        </template>
        <template #tags="{ record }">
          <!--        <a-input v-model="formData[rowIndex].updateTime" />-->
          <a-input-tag v-model="record.tags" readonly />
        </template>

        <template #optional="{ record }">
          <a-button
            type="outline"
            status="primary"
            @click="$modal.info({ title: '题目内容', content: record.content })"
            >预览题目
          </a-button>

          <a-button
            class="inline-button"
            type="dashed"
            status="success"
            @click="jumpToCoding(record.id)"
            >做题
          </a-button>
        </template>
      </a-table>
    </a-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { IconSearch } from "@arco-design/web-vue/es/icon";
import { onMounted, reactive, ref } from "vue";
import { QuestionControllerService } from "../../generated";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";

let queryParams = reactive({
  id: undefined,
  current: 1,
  size: 3,
  tags: "",
  title: "",
  userId: undefined,
  total: 50,
});
let formData = ref(null);
const columns = [
  {
    title: "ID",
    slotName: "id",
  },
  {
    title: "创建用户",
    dataIndex: "userVO.userRole",
  },
  {
    title: "标题",
    dataIndex: "title",
  },

  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    slotName: "createTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

let loadData = async () => {
  console.log("loadData");
  if (queryParams.tags == "") {
    queryParams.tags = [];
  } else {
    queryParams.tags = [queryParams.tags];
  }
  let res = await QuestionControllerService.listQuestionVoByPageUsingPost(
    queryParams
  );
  // console.log(res);
  // console.log(res.data);
  // console.log(res.data.records);

  if (res.code === 0) {
    formData.value = res.data.records;

    queryParams.total = res.data.total;
    queryParams.current = res.data.current;
    queryParams.size = res.data.size;
  } else {
    Message.error(res.message);
  }
};

onMounted(() => {
  loadData();
});

let router = useRouter();

let jumpToCoding = (id: number) => {
  router.push({
    name: "编程页面",
    params: {
      id,
    },
  });
};
</script>
<style scoped>
.inline-button {
  margin: 0 5px;
}
</style>
